<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>有货</title>
	<link rel="stylesheet" type="text/css" href="./Public/Home/org/bootstrap-3.3.5-dist/css/bootstrap.min.css" />
	<!-- <script src="./Public/Home/org/bootstrap-3.3.5-dist/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script> -->
	<script type="text/javascript" src="./Public/Home/Js/jquery-1.8.2.min.js"></script>
	<link rel="stylesheet" href="./Public/Home/Swiper-3.3.1/dist/css/swiper.min.css">
	<script type="text/javascript" src="./Public/Home/Swiper-3.3.1/dist/js/swiper.jquery.min.js"></script>
	<script type="text/javascript" src="./Public/Home/Swiper-3.3.1/dist/js/swiper.min.js"></script>
	<link rel="stylesheet" href="./Public/Home/Css/index.css">
	<link rel="stylesheet" href="./Public/Home/Css/common.css">
	<script type="text/javascript" src="./Public/Home/Js/index.js"></script>
	<link rel="stylesheet" href="./Public/Home/Css/login.css">
	<!-- 注：这儿不能引用注册的css，不然会将这儿的样式给覆盖 -->
	<link rel="stylesheet" href="./Public/Home/Css/pay.css">
	<script type="text/javascript" src="./Public/Home/Js/pay.js"></script>
	<link rel="stylesheet" href="./Public/Home/Css/order.css">
	<script type="text/javascript" src="./Public/Home/Js/order.js"></script>
	<!-- 引入城市js -->
	<script type="text/javascript" src="./Public/Home/Js/area.js"></script>
	<script type="text/javascript">
		$(function(){
			//初始化方法
			area.init('area');
			//执行修改时候默认选中效果
			// area.selected("北京","北京","东城区")
		})
	</script>
</head>
<body>
<header>
	<div id="simple-header">
		<div id="simple-header">
			{{include file="../Common/pay"}}
		</div>
	</div>
</header>
<article>
	<!-- 我的购物车 -->
	<div id="cart-all">
		<div id="cart-page">
		<!-- 进度条 -->
			<div class="cart-pag-line">
				<span></span>
				<!-- 这儿的进度条样式添加cart-cur -->
				<i></i>
				<span  class="cart-cur"></span>
				<i></i>
				<span></span>
			</div>
			<!-- 进度条提示 -->
			<div class="cart-pag-prompt">
				<span class="cart-prompt-left">查看购物车</span>
				<!-- 这儿 进度条的样式是添加cart-prompt-cur -->
				<span class="cart-prompt-cur">填写订单</span>
				<span class="cart-prompt-right">付款，完成购买</span>
			</div>
		</div>
	</div>
<!-- <form action="{{U('PayPage/index')}}" method="post"> -->
	<!-- 添加地址 -->
	<div id="order-edit-main">
		<div class="order-title">
			<span>请填写并核对以下信息 </span>
			<a href=""></a>
		</div>
		<div class="order-address">
			<div class="address-show">
				<span>收货地址</span>
				<a class="order-address-show order-address-cur">[修改]</a>
				<a class="order-address-show">[不保存并关闭]</a>
			</div>
			<div class="new-address"> <!-- 选中的时候这儿添加背景样式 -->
				<input type="radio" name="address" id="" checked="">使用新地址
			</div>
		</div>
		<form action="javascript:;" method="post">
			<div class="add-address" url="{{U('OrderPage/AjaxAddress')}}">
				<ul>
					<li>
						<a><span class="special">*</span>收货人姓名：</a>
						<input type="text" name="consignee" id="consignee">
						<span class="_info">请填写您的真实姓名，最多5个汉字</span>
					</li>
					<li>
						<a><span class="special">*</span>省市：</a>
						<select name="shen" id="area1"></select>
						<select name="shi" id="area2"></select>
						<select name="qu" id="area3"></select>
						<input type="text" name="juti" id="area4">
						<span class="_info">标'*'的为支持加急送的地区，请输入收货的详细地址</span>
					</li>
					<li>
						<a><span class="special">*</span>手机号码：</a>
						<input type="text" name="phone" id="phone">
						<span class="_info">填写正确手机号便于接收发货和收货通知</span>
					</li>
					<li>
						<a>固定电话：</a>
						<input type="text" name="area" id="text-area">
						<span class="line"></span>
						<input type="text" name="tell" id="text-phone">
						<span class="_info">如：010-12345678，固话和手机号至少填一项</span>
					</li>
					<li>
						<a>电子邮件：</a>
						<input type="text" name="e-mail" id="Email">
						<span class="_info">用来接收订单提醒邮件，便于您及时了解订单状态</span>
					</li>
					<li>
						<a>邮编：</a>
						<input type="text" name="postcode" id="postcode">
						<span class="_info">请填写准确的邮编，以确保商品尽快送达</span>
					</li>
				</ul>
				<button type="botton" class="btn btn-default _address-btn" id="address">下一步：选择支付及送货时间&nbsp;&nbsp;<span>▷</span></button>
			</div>
		</form>
		<script type="text/javascript">
			$(function(){
				$('#address').click(function(){
					var url = $('.add-address').attr('url');
					var consignee = $('#consignee').val();  //名字
					var address = $('#area1').val()+$('#area2').val()+$('#area3').val()+$('#area4').val(); 
					var phone = $('#phone').val();
					var tellPhone = $('#text-area').val()+$('#text-phone').val();
					var Email = $('#Email').val();
					var postcode = $("#postcode").val();
					$.ajax({
						type:'post',
						url:url,
						data:{consignee:consignee,address:address,phone:phone},
						dataType:'json',
						success:function(result){
							
						}
					})
				})
			})
		</script>
		<!-- 支付及送货时间 -->
		<div class="order-selection">
			<span>支付及送货时间</span>
			<ul>
				<li> 付款方式：<span>在线支付</span></li>
				<li>送货时间：<span>只工作日送货（双休日、节假日不送）</span></li>
				<li>送货前联系我：<span>否</span></li>
			</ul>
		</div>
		<!-- 选择快递 -->
		<div class="order-selection underline-none">
			<span>选择快递</span>
			<div class="express-list">
				<input type="radio" name="carriagegroup" id="" checked="checked" value="1"><span>普通快递：</span><span>运费 <a>￥10.00</a></span></br>
				<input type="radio" name="carriagegroup" id="" value="0"><span> 顺丰速运：</span><span>运费 <a>￥15.00</a>(仅支持顺丰可配送的地区)</span>
				<a class="order-note">注：配送会由于天气，交通等不可抗拒的客观因素造成您收货时间延迟，请您知悉</a>
				<a class="express-list-none">如您购买的商品为航空禁运品顺丰会用陆运的方式给你派送，预计3-5天送达，请您见谅</a>
			</div>
		</div>
		<!-- 支付金额 -->
	</div>
	<!-- 商品信息 -->
	<div id="pay-wapper">
		<div class="container goods-total">
			<div class="row clearfix">
				<div class="col-md-12 column">
					<table class="table table-bordered _table">
						<thead class="goods-title">
							<tr class="goods-num">
								<th style="width: 390px;">商品信息 </th>
								<th style="width: 120px;">单价(元)</th>
								<th style="width: 90px;">返YOHO币</th>
								<th style="width: 100px;">数量</th>
								<th >小计(元)</th>
								<th >商品金额(元)</th>
							</tr>
						</thead>
						<tbody>
							<!-- 这儿循环已添加的商品信息 -->
							{{foreach from="$goodsData" value="$v"}}
								<tr class="pay-wapper">
									<td  class="goods-check-info">
										<a href="" class="pay-pro-icon">
											<img src="{{$v['pic']}}" alt="">
										</a>
										<p class="pay-pro-info">
											<a href="" class="goodsName" title="{{$v['name']}}">{{$v['name']}}</a>
											{{foreach from="$v['size']" value="$value"}}
											<span class="size-color">颜色：黑色  尺码：XL</span>
											{{endforeach}}
										</p>
									</td>
									<td  class="goods-check">￥{{$v['price']}}</td>
									<td  class="goods-check">0 个</td>
									<td  class="goods-check goods-number">{{$v['num']}}</td>
									<td  class="goods-check">￥<span>{{$v['xiaoji']}}</span></td>
									<td  class="goods-check">￥<span>{{$v['xiaoji']}}</span></td>
								</tr>
							{{endforeach}}
							<!-- 循环点 -->
							<tr class="pay-wapper">
								<td  colspan = "6">
								<!-- 左边 -->
									<div class="pay-wapper-left">
										<div class="botton-left-one">
											<span class="pay-botton-cur"></span>
											<span>索要发票</span>
										</div>
										<div class="voucher">
											<ul>
												<li>
													<label>发票抬头：</label>
													<input type="text" name="debit" id="">
												</li>
												<li>
													<label>发票类型：</label>
													<select name="debit-type" id="">
														<option value="">--请选择--</option>
														<option value="图书">图书</option>
														<option value="资料">资料</option>
														<option value="办公用品">办公用品</option>
														<option value="洗涤用品">洗涤用品</option>
													</select>
												</li>
											</ul>
										</div>
										<!-- 添加备注信息 -->
										<div class="botton-left-two">
											<span class="pay-botton-cur1"></span>
											<span>添加备注信息</span>
										</div>
										<div class="comment-info">
											<textarea name="remark" id="" cols="30" rows="5"></textarea>
											<h class="comment-info-declare">声明：备注中有关收货人信息、支付方式、配送方式、发票信息等购买要求一律以上面的选择为准，备注无效。</h>
											<span>是否打印价格</span>
											<span>
												<input type="radio" name="print" id=""value="1">是
												<input type="radio" name="print" id="" checked="checked" value="0">否（如：送朋友的商品可不打印价格哦！）
											</span>
										</div>
									</div>
									<!-- 右边 -->
									<div class="pay-wapper-right">
										<div class="pay-right">
											<a href="" class="back-coin"></a>
											<span>共返YOHO币：0个</span>
										</div>
										<div class="play-total">
											<span> 商品总价：+ ¥<span class="zongjia">{{$total}} </span></span>
											<span class="carriage"> 运费：+ ¥<span class="carriage1">10.00</span> </span>
										</div>
										<div class="play-juan-pan">
											<span class="pay-juan-cur"></span>
											<span class="one">使用优惠券支付</span>
										</div>
										<div class="juan-display">
											<p class="strong">请选择您要使用的优惠券： </p>
											<p class="strong orange">(OUTLET商品除免邮券外不可使用优惠券)</p>
											<p class="strong orange">(订单中使用优惠券将不赠送商品返还的YOHO币)</p>
											<div class="is-select">
												<ul>
													<li class="no-color">
														<input type="radio" disabled="disabled" value="" name="juangroup">
														<label>新客专享券：满599减60（全品类）</label>
													</li>
													<li class="no-color">
														<input type="radio" disabled="disabled" value="" name="juangroup">
														<label>新客专享券：满399减40（全品类）</label>
													</li>
													<li>
														<input type="radio" value="" name="juangroup">
														<label>新客专享券：10元现金券（全品类）</label>
													</li>
													<li>
														<input type="radio" value="" name="juangroup" checked="">
														<label>直接输入优惠券码： </label>
														<input id="juancode" class="textbox" type="text">
													</li>
												</ul>
											</div>
											<span class="pay-cancel">取消</span>
											<span class="pay-sure">确定</span>
										</div>
										<div class="play-Yoho-pan">
											<span class="pay-juan-cur1"></span>
											<span class="one">使用YOHO币支付</span>
										</div>
										<div class="is-yuho-pan">
											<div class="use-yuho">
												使用YOHO币：<input type="text" name="" id="">个
												<p>
													您目前有YOHO币
													<a class="strong">0</a>
													个
												</p>
												<p class="errbitip red">您的YOHO币不足</p><!-- 该提示语是个隐藏域，只有当上面的那个p触发才显示 -->
												<span class="pay-yuho-cancel">取消</span>
												<span class="pay-yuho-sure">确定</span>
											</div>
										</div>
									</div>
								</td>
							</tr>
						</tbody>
					</table>
				</div>
			</div>
		</div>
	</div>
	<!-- 去付款 -->
	<div id="to-pay-total">
		<p>您需要实际支付金额：<a id="TotalPay">{{$total}}</a>元</p>
		<input type="submit" value="去付款">
		<!-- <a href="{{U('PayPage/index')}}"><span>去付款</span></a> -->
	</div>
<!-- </form> -->
	<script type="text/javascript">
		$(function(){
			var total1 = $(".carriage1").html();
			var total2 = $(".zongjia").html();
			var total = parseFloat(total1) + parseFloat(total2);
			$("#TotalPay").html(total);
		})
	</script>
</article>
{{include file="../Common/footer"}}
</body>
</html>